<template>
  <el-dialog :title="title"
             :close-on-click-modal="false"
             v-loading="loading"
             @close="$emit('close')" :visible.sync="visible" width="1250px">
    <el-form :model="form" :rules="rules" ref="form" size="mini" label-width="120px" inline :disabled="isDetail">
      <div>
        <el-form-item label="政策类型">
          <el-radio-group v-model="form.policyType">
            <el-radio label="BSP"/>
          </el-radio-group>
        </el-form-item>
        <div>
        <el-form-item label="名称">
          <el-input class="w450"  v-model="form.name" />
        </el-form-item>
      </div>
      </div>
      <div>
        <el-form-item label="返点">
          <c-percent-input clearable :disabled="!(!form.fixedFee || (!!form.rebates && !!form.fixedFee))" class="w150" v-model="form.rebates"/>
        </el-form-item>
        <el-form-item label="定额代理费" label-width="136px">
          <el-input clearable :disabled="!!form.rebates" class="w150" v-model="form.fixedFee">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <div class="font-gray">(返点和定额代理费只能填写一个)</div>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="航空公司" prop="airline">
          <el-select v-model="form.airline" class="w450" clearable filterable>
            <el-option v-for="item in options.airLine" :label="item.value" :value="item.key" :key="item.key"/>
          </el-select>
        </el-form-item>
        <el-form-item label="乘机日期" prop="departDateStart">
          <el-date-picker value-format="timestamp" class="w120" v-model="form.departDateStart" placeholder="起始日期"/>
        </el-form-item>
        <el-form-item>
          至
        </el-form-item>
        <el-form-item prop="departDateEnd">
          <el-date-picker class="w120" v-model="form.departDateEnd" placeholder="结束日期"/>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="适用航程类型">
          <div class="w450">
            <el-checkbox-group v-model="flightWayArr" style="width: 228px;display: inline-block;">
              <el-checkbox v-for="item in options.flightWay" :key="item.key" :label="item.key">{{item.value}}</el-checkbox>
            </el-checkbox-group>
            <el-checkbox v-model="form.applyShareFlight" true-label="1" false-label="0">适用共享航班</el-checkbox>
          </div>
        </el-form-item>
        <!--<el-form-item label="适用乘客类型">-->
          <!--<el-checkbox-group v-model="ageTypeArr">-->
            <!--<el-checkbox v-for="item in options.ageType" :key="item.key" :label="item.key">{{item.value}}</el-checkbox>-->
          <!--</el-checkbox-group>-->
        <!--</el-form-item>-->
      </div>
      <div>
        <el-form-item label="出发城市">
          <el-input class="w450" v-model="form.dCity" placeholder="多个使用/隔开,   ---空表示匹配所有。格式：CAN/PEK"/>
        </el-form-item>
        <el-form-item label="排除出发城市">
          <el-input class="w450" v-model="form.excludeDCity" placeholder="多个使用/隔开,   ---空表示匹配所有。格式：CAN/PEK"/>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="到达城市">
          <el-input class="w450" v-model="form.aCity" placeholder="多个使用/隔开,   ---空表示匹配所有。格式：CAN/PEK"/>
        </el-form-item>
        <el-form-item label="排除到达城市">
          <el-input class="w450" v-model="form.excludeACity" placeholder="多个使用/隔开,   ---空表示匹配所有。格式：CAN/PEK"/>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="排除航线">
          <el-input style="width: 1034px" v-model="form.excludeFlightTrip" placeholder="多个使用/隔开,   ---空表示匹配所有。格式：CAN-PEK/CAN-SHA, 表示排除广州到北京 和广州到上海航线"/>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="航班号">
          <el-input class="w450" v-model="form.flightNo" placeholder="多个使用/隔开,   ---空表示匹配所有。格式：HU2222/HU22332"/>
        </el-form-item>
        <el-form-item label="除外航班号">
          <el-input class="w450" v-model="form.excludeFlightNo" placeholder="多个使用/隔开,   ---空表示匹配所有。格式：HU2222/HU22332"/>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="班期限制">
          <el-checkbox-group v-model="weekArr" class="w450">
            <el-checkbox class="week-checkbox" v-for="item in options.week" :key="item.key" :label="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="适用舱位">
          <el-input class="w450"
                    @keyup.native.enter="form.clazz+='/'"
                    v-model="form.clazz"
                    placeholder="多个使用/隔开,   ---空表示匹配所有。格式：H/F/Y"/>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="生效日期">
          <el-date-picker class="w120" v-model="form.effectTimeStart" placeholder="起始日期"/>
        </el-form-item>
        <el-form-item label-width="25px" label="至">
          <el-date-picker class="w120" v-model="form.effectTimeEnd" placeholder="结束日期"/>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <easy-button v-if="!isDetail" type="primary" @click="onOk">确 定</easy-button>
    </div>
  </el-dialog>
</template>

<script>

function chunk (arr, size) {
  const result = []
  for (let i = 0; i < arr.length; i = i + size) {
    result.push(arr.slice(i, i + size))
  }
  return result
}

export default {
  name: 'SDialogAdd',
  props: {
    data: {
      type: Object,
      default () {
        return {
          id: ''
        }
      }
    }
  },
  data () {
    return {
      isDetail: false,
      title: '',
      visible: true,
      loading: false,
      checkbox: {},
      options: {
        airLine: [],
        flightWay: [
          {'key': '1', 'value': '单程'},
          {'key': '2', 'value': '往返'}
        ],
        ageType: [
          {'key': 'ADU', 'value': '成人'},
          {'key': 'CHD', 'value': '儿童'}
        ],
        week: [
          {'key': '1', 'value': '周一'},
          {'key': '2', 'value': '周二'},
          {'key': '3', 'value': '周三'},
          {'key': '4', 'value': '周四'},
          {'key': '5', 'value': '周五'},
          {'key': '6', 'value': '周六'},
          {'key': '0', 'value': '周日'}
        ]
      },
      form: {
        airline: null,
        policyType: 'BSP',
        rebates: null,
        departDateStart: null,
        departDateEnd: null,
        dCity: null,
        aCity: null,
        excludeFlightTrip: null,
        // ageType: 'ADU',
        effectTimeStart: null,
        effectTimeEnd: null,
        status: 1,
        fixedFee: null,
        flightWay: '1',
        applyShareFlight: '0',
        excludeDCity: null,
        excludeACity: null,
        flightNo: null,
        excludeFlightNo: null,
        week: null
      },
      rules: {
        airline: this.$checkRules.policy.airline,
        departDateStart: this.$checkRules.policy.departDateStart,
        departDateEnd: this.$checkRules.policy.departDateEnd
      }
    }
  },
  computed: {
    flightWayArr: {
      get () {
        if (!this.form.flightWay) {
          return []
        } else {
          return this.form.flightWay.split('/')
        }
      },
      set (arr) {
        this.form.flightWay = arr.join('/')
      }
    },
    // ageTypeArr: {
    //   get () {
    //     if (!this.form.ageType) {
    //       return []
    //     } else {
    //       return this.form.ageType.split('/')
    //     }
    //   },
    //   set (arr) {
    //     this.form.ageType = arr.join('/')
    //   }
    // },
    weekArr: {
      get () {
        if (!this.form.week) {
          return []
        } else {
          return this.form.week.split('/')
        }
      },
      set (arr) {
        this.form.week = arr.join('/')
      }
    }
  },
  watch: {
    'form.fixedFee' (v) {
      if (v) {
        this.$nextTick(() => {
          this.form.fixedFee = ('' + v).replace(/[^0-9.-]/g, '')
        })
      }
    },
    'form.flightNo' (v) {
      if (v) {
        let str = v.toUpperCase().replace(/\//g, '')
        this.form.flightNo = chunk(str, 6).join('/')
      }
    },
    'form.excludeFlightNo' (v) {
      if (v) {
        let str = v.toUpperCase().replace(/\//g, '')
        this.form.excludeFlightNo = chunk(str, 6).join('/')
      }
    },
    'form.clazz' (v) {
      if (v) {
        this.$nextTick(() => {
          this.form.clazz = v.toUpperCase()
        })
      }
    },
    'form.dCity' (v) {
      if (v) {
        let str = v.toUpperCase().replace(/\//g, '')
        this.form.dCity = chunk(str, 3).join('/')
      }
    },
    'form.excludeDCity' (v) {
      if (v) {
        let str = v.toUpperCase().replace(/\//g, '')
        this.form.excludeDCity = chunk(str, 3).join('/')
      }
    },
    'form.aCity' (v) {
      if (v) {
        let str = v.toUpperCase().replace(/\//g, '')
        this.form.aCity = chunk(str, 3).join('/')
      }
    },
    'form.excludeACity' (v) {
      if (v) {
        let str = v.toUpperCase().replace(/\//g, '')
        this.form.excludeACity = chunk(str, 3).join('/')
      }
    },
    'form.excludeFlightTrip' (v) {
      if (v) {
        let str = v.toUpperCase().replace(/\//g, '').replace(/-/g, '')
        const arr = chunk(str, 3)
        let result = ''
        arr.forEach((v, i) => {
          if (i % 2 === 0) {
            result += '/' + v
          } else {
            result += '-' + v
          }
        })
        this.form.excludeFlightTrip = result.substring(1)
      }
    }
  },
  created () {
    this.loadOptions()
  },
  methods: {
    loadDetail () {
      this.loading = true
      this.$service.policy.detailPolicy({id: this.data.id}).then(res => {
        Object.assign(this.form, res.data)
      }).finally(() => {
        this.loading = false
      })
    },
    onOk (done) {
      this.$refs['form'].validate((valid) => {
        // 校验通过
        if (valid) {
          this.submit(done)
        } else {
          this.$alert('校验未通过', '提示')
          done()
        }
      })
    },
    // 被继承重写
    submit (done) {
      done()
    },
    loadOptions () {
      this.$service.options.getAirLineOption().then(res => {
        this.options.airLine = res.data
      })
    }
  }
}
</script>

<style scoped>
.week-checkbox+.week-checkbox {
  margin-left: 13px;
}
</style>
